/**
 * 元素动画实现函数
 */

import Konva from "konva";
import { gsap } from "gsap";
import { VoidFun } from "../Interface/Pptx";

export const ANIMATION_FLASH = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const duration = 0.25;
  timeline
    .to(node, {
      opacity: 0,
      duration,
    })
    .to(node, {
      opacity: 1,
      duration,
    })
    // 动画间的停顿事件
    .to(node, {
      duration: 0,
    })
    .to(node, {
      opacity: 0,
      duration,
    })
    .to(node, {
      opacity: 1,
      duration,
      onComplete,
    });
  return timeline;
};

export const ANIMATION_SHAKEX = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const duration = 0.1;
  timeline
    .to(node, {
      x: "-=20",
      duration,
    })
    .to(node, {
      x: "+=40",
      duration,
    })
    .to(node, {
      x: "-=20",
      duration,
      onComplete,
    });

  return timeline;
};
export const ANIMATION_HEARTBEAT = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const duration = 0.25;
  const scale = 1.35;

  const offsetX = node.width() * scale - node.width();
  const offsetY = node.height() * scale - node.height();

  const nodeZoomInOpts = {
    scaleX: scale,
    scaleY: scale,
    x: node.x() - offsetX / 2,
    y: node.y() - offsetY / 2,
    duration,
  };

  const nodeZoomOutOpts = {
    scaleX: 1,
    scaleY: 1,
    x: node.x(),
    y: node.y(),
    duration,
  };

  timeline
    .to(node, nodeZoomInOpts)
    .to(node, nodeZoomOutOpts)
    .to(node, nodeZoomInOpts)
    .to(node, nodeZoomOutOpts)
    .to(node, { onComplete });

  return timeline;
};
export const ANIMATION_BACKINDOWN = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const duration = 1.5;
  timeline.fromTo(
    node,
    { scaleY: 0, duration },
    { scaleY: 1, duration, onComplete }
  );
  return timeline;
};
export const ANIMATION_FADEIN = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const tween = gsap.fromTo(
    node,
    {
      opacity: 0,
      scaleX: 0,
      scaleY: 0,
      x: node.x() + node.width() / 2,
      y: node.y() + node.height() / 2,
    },
    {
      opacity: 1,
      scaleX: 1,
      scaleY: 1,
      x: node.x(),
      y: node.y(),
      onComplete,
    }
  );

  timeline.add(tween);
  return timeline;
};
export const ANIMATION_ROTATEIN = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  timeline.from(node, {
    rotation: -90,
    duration: 0.8,
    opacity: 0,
    onComplete,
  });
  return timeline;
};
export const ANIMATION_ZOOMIN = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const tween = gsap.fromTo(
    node,
    {
      scaleX: 0,
      scaleY: 0,
      x: node.x() + node.width() / 2,
      y: node.y() + node.height() / 2,
    },
    {
      scaleX: 1,
      scaleY: 1,
      x: node.x(),
      y: node.y(),
      onComplete,
    }
  );

  return timeline.add(tween);
};
export const ANIMATION_BACKOUTDOWN = (
  node: Konva.Node,
  onComplete: VoidFun
) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const duration = 1.5;
  timeline.fromTo(
    node,
    { scaleY: 1, y: node.y(), duration },
    { scaleY: 0, y: node.y() + node.height(), duration, onComplete }
  );
  return timeline;
};
export const ANIMATION_FADEOUT = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  // gsap to from fromTo  创建的是补间动画
  // gsap.fromTo：可以自定义开始和结束状态

  const tween = gsap.to(node, {
    opacity: 0,
    scaleX: 0,
    scaleY: 0,
    x: node.x() + node.width() / 2,
    y: node.y() + node.height() / 2,
    onComplete,
  });

  // 将补间动画添加到时间轴上
  timeline.add(tween);

  return timeline;
};
export const ANIMATION_ROTATEOUT = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  timeline.to(node, {
    rotation: 90,
    duration: 1.1,
    opacity: 0,
    onComplete,
  });
  return timeline;
};
export const ANIMATION_ZOOMOUT = (node: Konva.Node, onComplete: VoidFun) => {
  const timeline = gsap.timeline();
  timeline.pause();
  const tween = gsap.fromTo(
    node,
    {
      scaleX: 1,
      scaleY: 1,
      x: node.x(),
      y: node.y(),
    },
    {
      scaleX: 0,
      scaleY: 0,
      x: node.x() + node.width() / 2,
      y: node.y() + node.height() / 2,
      onComplete,
    }
  );

  return timeline.add(tween);
};
